<template>
  <transition name="fade">
    <div v-if="visible" class="center-toast" :class="type">
      <div class="toast-card">
        <div class="toast-title">{{ title }}</div>
        <div class="toast-message">{{ message }}</div>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  title: { type: String, default: '' },
  message: { type: String, default: '' },
  type: { type: String, default: 'info' }, // info | success | error
  timeout: { type: Number, default: 1600 }
})
const emit = defineEmits(['update:modelValue'])

const visible = ref(props.modelValue)

watch(() => props.modelValue, (v) => { visible.value = v })

let timer: any = null
watch(visible, (v) => {
  if (v) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => { emit('update:modelValue', false) }, props.timeout)
  }
})

onMounted(() => { visible.value = props.modelValue })
</script>

<style scoped>
.center-toast {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translateX(-50%);
  z-index: 9999;
}
.toast-card {
  min-width: 240px;
  max-width: 420px;
  background: #fff;
  padding: 14px 18px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(31,54,71,0.06);
  text-align: center;
}
.toast-title { font-weight: 600; margin-bottom: 6px }
.toast-message { color: #666 }
.center-toast.success .toast-card { border-left: 4px solid #67c23a }
.center-toast.error .toast-card { border-left: 4px solid #f56c6c }
.center-toast.info .toast-card { border-left: 4px solid #909399 }
.center-toast .toast-title { color: var(--text) }
.fade-enter-active, .fade-leave-active { transition: opacity .2s }
.fade-enter-from, .fade-leave-to { opacity: 0 }
</style>
